<template>
  <view class="content">
    <!-- 顶部分段器 -->
    <view class="splitRecord" style="padding-bottom:20rpx;">
      <view class="flex-row flex-jus-bet" style="height: 60rpx;line-height: 60rpx;padding: 0 30rpx;">
        <view class="name">次数：{{ pagesData.total || 0 }}次</view>
        <view class="name">金额：{{ formatNumber(totalMoney) || 0 }}</view>
        <view class="name">均消：{{ pagesData.total == 0 ? 0 : formatNumber(totalMoney / pagesData.total) }}</view>
      </view>
    </view>
  </view>
  <scroll-view @scrolltolower="finishPullUp" class="scroll" scroll-y :style="{'top':top+'px','height':scollHeight}" :show-scrollbar="false">
    <view class="content-body" v-if="roomList.length>0" v-for="(item,index) in roomList" :key="index"
          :style="{'marginTop':index!=0?'30rpx':0}">
      <view class="flex-col">
        <view class="flex-row flex-jus-bet flex-ali-cen">
          <view class="content-title-name">{{ item.book_time }}</view>
          <view class="flex-row flex-ali-cen">
            <view class="content-title-name">{{ item.room_name }}</view>
          </view>
        </view>
        <view class="flex-row flex-jus-bet flex-ali-cen" style="margin-top: 20rpx;">
          <view class="flex-row flex-ali-cen">
            <view class="content-title">时长：</view>
            <view class="content-value">{{ item.duration }}</view>
          </view>
          <view class="flex-row flex-ali-cen">
            <view class="content-title">销售：</view>
            <view class="content-value">{{ item.salesman_name }}</view>
          </view>
          <view class="flex-row flex-ali-cen">
            <view class="content-title">清台：</view>
            <view class="content-value">{{ item.d_out_date || '暂未清台' }}</view>
          </view>
        </view>
      </view>
      <view class="line-split" style="margin: 20rpx 0rpx;"></view>
      <view class="flex-row flex-jus-bet flex-ali-cen" style="margin-top: 20rpx;">
        <view class="flex-row flex-ali-cen">
          <view class="content-title">消费金额：</view>
          <view class="content-value">{{ formatNumber(item.total_money) }}</view>
        </view>
        <view class="flex-row flex-ali-cen">
          <view class="content-title">实收金额：</view>
          <view class="content-value">{{ formatNumber(item.receipt_money) }}</view>
        </view>
        <view class="flex-row flex-ali-cen" @click="showCheckItem(item,index)">
          <view class="content-title" style="color: #5697D7;">消费明细</view>
          <view v-if="!item.show">
            <uni-icons type="right" size="14" color="#5697D7"></uni-icons>
          </view>
          <view v-else>
            <uni-icons type="down" size="14" color="#5697D7"></uni-icons>
          </view>
        </view>
      </view>
      <view v-if="item.show && item.items.length>0">
        <view class="flex-row flex-jus-bet" style="margin: 20rpx 0;">
          <view class="content-title" style="width: 50%;">名称 / 数量 / 规格</view>
          <view class="content-title flex-row flex-jus-start" style="width: 25%;">总金额</view>
          <view class="content-title flex-row flex-jus-end" style="width: 25%;">
            总实收
          </view>
        </view>
        <view class="flex-row flex-jus-bet" style="margin: 20rpx 0;" v-for="(detail,index1) in item.items"
              :key="index1" :style="{'marginBottom':index1+1 == item.items.length?'0rpx':'20rpx'}">
          <view class="content-value" style="width: 50%;">{{ detail.specs_name }} /
            {{ formatNumber(detail.specs_number) }} / {{ detail.specs_unit }}
          </view>
          <view class="content-value flex-row flex-jus-start" style="width: 25%;">
            {{ formatNumber(detail.total_money) }}
          </view>
          <view class="content-value flex-row flex-jus-end" style="width: 25%;">
            {{ formatNumber(detail.total_fact_money) }}
          </view>
        </view>
      </view>
      <view v-if="item.show && item.items.length == 0&& requestLoading == 2"
            style="font-size: 24rpx;color: var(--grey-text);text-align: center;margin:30rpx 0 10rpx 0;">
        该桌台无消费明细酒水
      </view>
    </view>

    <view v-if="roomList.length ==0 && requestLoading == 2"
          style="font-size: 28rpx;color: var(--grey-text);text-align: center;padding-top: 400rpx;">
      该客户暂无订桌记录~
    </view>
    <view class="load-bottom">
      <view v-if="loadingFlag == 1" class="load_in" :class="loadingFlag == 1 ? 'load_in_ani' : ''">
        <uni-icons type="spinner-cycle" size="30" color="#ff6f3f"></uni-icons>
      </view>
      <view v-show="loadingFlag == 2" class="load_over">数据已全部加载~</view>
    </view>
  </scroll-view>

</template>

<script>
export default {
  props: {
    topHeight: {
      type: [String, Number],
      require: true,
      default: 0
    },
    customId: {
      type: [String, Number],
      require: true,
      default: 0
    }
  },
  mounted() {
    let systemHeight = uni.getSystemInfoSync().statusBarHeight
    const query = uni.createSelectorQuery().in(this);
    query.select(".splitRecord")
        .boundingClientRect((data) => {
          this.top = data.height + systemHeight + 44 + 45
          let height = '100vh',
              top = this.top + 'px',
              topHeight = this.topHeight + 'px'
          this.scollHeight = `calc(${height} - ${top})`
        })
        .exec();
    this.getRoomRecord()
  },
  data() {
    return {
      requestLoading: 1,
      scollHeight: 0,
      pagesData: {
        page: 1,
        limit: 15,
        total: 0
      },
      top: 0,
      loadingFlag: 0,
      roomList: [],
      totalMoney: 0,
      shopIndex: this.$commonJs.getChooseShopIndex(),
      shopList: this.$commonJs.getShopList(),
    }
  },
  methods: {
    getRoomRecord() {
      const self = this
      const params = {
        id: this.customId,
        page: this.pagesData.page,
        limit: this.pagesData.limit
      }
      this.$commonJs.queryCache('/app/admin/bookRecord', params, {
        before() {
          self.requestLoading = 1
        },
        success(res) {
          try {
            const {
              code,
              data,
              msg,
              server_ip
            } = res

            if (data.hasOwnProperty('list') && data.hasOwnProperty('count') && data.hasOwnProperty('money')) {
              data.list.map((item) => {
                item.show = false
                item.items = []
                return item
              })
              self.roomList = [...self.roomList, ...data.list]
              self.pagesData.total = data.count
              self.totalMoney = data.money
            }
          } catch (error) {
            //TODO handle the exception
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        },
        complete() {
          self.requestLoading = 2
          self.loadingFlag = 0
        }
      },{"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 上拉加载
     * @param e
     */
    finishPullUp(e) {
      if (this.loadingFlag == 1 || this.loadingFlag == 2) {
        return
      }
      let pages = Math.ceil(this.pagesData.total / this.pagesData.limit)
      if (this.pagesData.page >= pages) {
        this.loadingFlag = 2
        return
      }
      if (this.loadingFlag == 0) {
        this.loadingFlag = 1
        this.pagesData.page++
        this.getRoomRecord()

      }
    },
    showCheckItem(item, index) {
      this.roomList[index].show = !this.roomList[index].show
      if (this.roomList[index].show) {
        this.getRoomDetail(item.room_book_id, index)
      }
    },
    getRoomDetail(room_book_id, index) {
      const self = this
      const params = {
        room_book_id,
        limit: 100,
        page: 1
      }
      self.$commonJs.queryCache('/app/admin/bookOrderItem', params, {
        before() {
          self.requestLoading = 1
        },
        success(res) {
          try {
            const {
              code,
              data,
              msg,
              server_ip
            } = res
            self.roomList[index].items = []
            if (data.hasOwnProperty('list') && data.hasOwnProperty('count')) {
              self.roomList[index].items = data.list
            }
          } catch (error) {
            //TODO handle the exception
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        },
        complete() {
          self.requestLoading = 2
        }
      },{"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },
    /**
     * 格式化处理
     * @param money
     * @returns {string|*}
     */
    formatNumber(money) {
      // 判断是否为整数（即小数部分是否为 0）
      if (money % 1 === 0) {
        return Number(money).toString()
      } else {
        return Number(money).toFixed(2)
      }
    },
  }
}
</script>

<style scoped lang="scss">
.splitRecord {
  background: #1d1d1d !important;
}

@media (prefers-color-scheme: light) {
  .splitRecord {
    background: #feffff !important;
  }
}

.name {
  font-size: 26rpx;
  color: var(--grey-text);
}

.scroll {
  box-sizing: border-box;
  display: flex;
  position: absolute;
  padding: 30rpx 30rpx 4rpx 30rpx;
}

.content-body {
  background: var(--bg-center-color);
  height: auto;
  border-radius: 6rpx;
  padding: 20rpx 20rpx 20rpx 20rpx;
}

.content-title-name {
  font-size: 28rpx;
  color: var(--white-text);
  font-weight: 600;
}

.content-title {
  font-size: 24rpx;
  color: var(--grey-text);
}

.content-value {
  font-size: 24rpx;
  color: var(--white-text);
}

.content-from {
  height: 58rpx;
  text-align: center;
  line-height: 58rpx;
  font-size: 24rpx;
  color: var(--grey-text);
  flex: 1;
}

.content-from-active {
  background: #5697D7;
  color: #fff;
  border-radius: 10rpx;
}

.flex {
  display: flex;
  align-items: center;

  &-row {
    flex-direction: row;
  }

  &-wrap {
    flex-wrap: wrap;
  }

  &-nowrap {
    flex-wrap: nowrap;
  }

  &-col {
    flex-direction: column;
  }

  &-1 {
    flex: 1;
  }

  &-shrink {
    flex-shrink: 0;
  }

  &-jus-cen {
    justify-content: center;
  }

  &-jus-bet {
    justify-content: space-between;
  }

  &-jus-end {
    justify-content: flex-end;
  }

  &-jus-start {
    justify-content: flex-start;
  }

  &-jus-aro {
    justify-content: space-around;
  }

  &-jus-eve {
    justify-content: space-evenly;
  }

  &-jus-self-end {
    justify-self: end;
  }

  &-ali-cen {
    align-items: center;
  }

  &-ali-sta {
    align-items: flex-start;
  }

  &-ali-end {
    align-items: flex-end;
  }
}

.content {
  width: 100vw;
  padding-top: calc(var(--status-bar-height) + 88rpx + 90rpx);
}
</style>